<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>记事本</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    body {
      background-color: #f6f6f6;
    }

    .header {
      margin: 0 auto;
    }

    .header h1 {
      margin-left: 80px;
    }

    .header input {
      /* float: left; */
      width: 200px;
      height: 40px;
      border: 1px solid red;
      border-top-left-radius: 10px;
      /* 设置左上角的圆角 */
      border-bottom-left-radius: 10px;
      /* 设置左下角的圆角 */
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
      /* 添加阴影 */
    }

    .add {
      /* float: left; */
      width: 93px;
      height: 40px;
      background-color: #c76458;
      color: white;
      border: none;
    }

    #app {
      width: 300px;
      /* height: 200px; */
      margin: 0 auto;
      background-color: #fefefe;
    }


    li {
      border-bottom: 1px solid black;
      text-decoration: none;
      list-style-type: none;
    }

    li:hover {
      background-color: skyblue;
    }

    li:hover .destroy {
      display: block;
    }

    .view {
      width: 100%;
      height: 30px;
      /* text-align: center; */
      line-height: 30px;
    }

    .index {
      float: left;
    }

    .destroy {
      float: right;
      margin-top: 5px;
      display: none;
      background-color: transparent;
      border: none;
      color: red;
      font-size: 20px;
    }

    .clear {
      float: right;
      background-color: transparent;
      border: none;
    }

    .footer,
    .clear {
      font-size: 15px;
      color: #cccccc;
    }

    .input-wrapper {
      display: flex;
    }

    .input-wrapper input {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      font-size: 16px;
    }

    .add {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  </style>
</head>

<body>
  <section id="app">
    <header class="header">
      <h1>FindYou记事本</h1>
      <div class="input-wrapper">
        <input v-model="todoName" @keyup.enter="add()" placeholder="请输入任务">
        <button @click="add()" class="add">添加任务</button>
      </div>
    </header>

    <!-- 列表区域 -->
    <section>
      <ul class="todo-list">
        <li class="todo" v-for="(item, index) in list" :key="item.id">
          <div class="view">
            <span class="index">{{index + 1}}:&nbsp;&nbsp;</span><label>{{item.name}}</label>
            <button @click="del(item.id)" class="destroy">X</button>
          </div>
        </li>
        </li>
      </ul>
    </section>

    <!-- 统计和清空 -->
    <footer class="footer" v-show="list.length > 0">
      <!-- 统计 -->
      <span class="todo-count">合 计: <strong>{{count}}</strong></span>
      <button @click="clear()" class="clear">清空任务</button>
    </footer>
  </section>

  <script src="../vue.js"></script>
  <script>
    //添加
    const todo = new Vue({

      el: '#app',
      data: {
        todoName: '',
        list: [
          { id: 1, name: '跑步一个里' },
          { id: 2, name: '跳绳200次' },
          { id: 3, name: '游泳100米' },
        ],
        count: 3
      },
      methods: {
        del(index) {
          this.count--
          this.list = this.list.filter(item => item.id != index)
        },
        add() {
          if (this.todoName == '') {
            alert('请输入任务名称')
            return
          }
          this.list.unshift({
            id: +new Date(), //作为临时的 因为为了唯一嘛
            name: this.todoName
          })
          this.count++
          this.todoName = ''
        },
        clear() {
          this.list = []
          this.count = 0
        }

      }
    })
  </script>
</body>

</html>